import DrawsAbstract from "../DrawsAbstract";
import gsap from "gsap";

export class DrawImage extends DrawsAbstract{
    image: HTMLImageElement
    imageLoad = false
    drawStyle = {
        size: {
            width: 0,
            height: 0
        },
        position: {
            x: 0,
            y: 0
        }
    }

    constructor(ctx: CanvasRenderingContext2D, src: string, size?: {width: number, height: number}, position?: {x: number, y: number}) {
        super(ctx, size, position);
        this.image = new Image()
        this.image.onload =  () => {
            this.imageLoad = true
        }
        this.image.src = src;
    }

    realDraw() {
        this.imageLoad && this.drawImageOn()
    }

    in() {
        this.drawStyle.position = this.position
        this.drawStyle.size.height = this.size.height
        gsap.to(this.drawStyle.size, {
            duration: this.baseDuration,
            width: this.size.width,
        })
    }

    out() {
        gsap.to(this.drawStyle.size, {
            duration: this.baseDuration,
            width: 0,
        })
    }

    private drawImageOn() {
        this.ctx.drawImage(this.image, this.drawStyle.position.x, this.drawStyle.position.y, this.drawStyle.size.width, this.drawStyle.size.height)
    }
}
